<template>
  <scroll-view class="aside-list" scroll-y>
    <view
      class="aside-list-item"
      v-for="(item, index) in dataList"
      :key="index"
      :class="[
        activeTab == index ? 'active' : '',
        index == activeTab + 1 ? 'top-raduis' : '',
        index == activeTab - 1 ? 'bottom-raduis' : ''
      ]"
      @click="handleTabItem(item, index)"
    >
      <view v-if="index == activeTab" class="item-active-line"></view>
      <view class="item-text">{{ item.name }}</view>
    </view>
  </scroll-view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    dataList: {
      type: Array,
      default: []
    }
  },
  mixins: [],
  components: {},
  data() {
    return {
      activeTab: 0,
      first: false
    };
  },
  mounted() {},
  watch: {
    dataList: {
      handler() {
        // #ifdef MP-ALIPAY
        if (!this.first) {
          this.init();
          this.first = true;
        }
        // #endif
        // #ifndef MP-ALIPAY
        this.init();
        // #endif
      },
      immediate: true,
      deep: true
    },
    getGoCatId: {
      handler() {
        this.$nextTick(()=>{
          this.init();
        })
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(["getGoCatId"])
  },
  methods: {
    init() {
      if (this.dataList.length) {
        let e = this.getGoCatId,
          { dataList } = this,
          index = 0,
          item = dataList.find((el) => el.id === e);

        if (item) {
          index = dataList.findIndex((el) => el.id === e);
        } else {
          try {
            if (dataList.findIndex((el) => el.id === e) !== index) {
              let newList = this.$utils.getFlatArray(dataList);
              let parent_id = newList.find((el) => el.id === e).parent_id,
                parent = newList.find((el) => el.id === parent_id);
              index = dataList.findIndex((el) => el.id === parent.id);
            }
          } catch (error) {}
        }

        item = dataList[index];
        this.$nextTick(() => {
          this.handleTabItem(item, index);
        });
      }
    },
    handleTabItem(item, index) {
      this.activeTab = index;
      this.$emit("leftNavChange", item);
    }
  }
};
</script>

<style lang="scss" scoped>
.aside-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  .aside-list-item {
    width: 100%;
    height: 92rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    position: relative;
    user-select: none;
    .item-text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
      height: 40rpx;
      line-height: 40rpx;
    }
  }
  .active {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    background: #ffffff;
    .item-active-line {
      width: 6rpx;
      height: 32rpx;
      background: #f0250e;
      position: absolute;
      left: 20rpx;
      top: 30rpx;
      z-index: 1;
    }
    .item-text {
      font-size: 32rpx;
      font-weight: 600;
    }
  }
  .top-raduis {
    border-radius: 0 20rpx 0 0;
  }
  .bottom-raduis {
    border-radius: 0 0 20rpx 0;
  }
}
</style>
